<template>
  <div class="second-row">
    <el-card shadow="hover">
      <template #header>
        <el-menu
          mode="horizontal"
          :default-active="activeindex"
          @select="handleSelect"
        >
          <el-menu-item index="1">销售额</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>
        <div class="right">
          <el-radio-group v-model="radio">
            <el-radio-button label="今日"></el-radio-button>
            <el-radio-button label="本周"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="今年"></el-radio-button>
          </el-radio-group>
          <div class="block">
            <el-date-picker
              v-model="value"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </div>
        </div>
      </template>
      <div class="card-content">
        <div class="left-chart">
          <div
            style="
              position: relative;
              width: 1188px;
              height: 434px;
              padding: 0px;
              margin: 0px;
              border-width: 0px;
              cursor: default;
            "
          >
            <v-chart :option="option"></v-chart>
          </div>
        </div>
        <div class="right-list">
          <div class="list-title">排行榜</div>
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <span :class="item.no <= 3 ? 'top-3' : ''">{{ item.no }}</span>
            <span>{{ item.title }}</span>
            <span>{{ item.sales }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSaleData } from "@/api/index";
export default {
  data() {
    return {
      saledata: {},
      list: [],
      option: {},
      option2: {},
      activeindex: "1",
      radio: "今日",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: "",
    };
  },
  methods: {
    handleSelect(index) {
      this.activeindex = index;
      if (this.activeindex === "1") {
        this.renderChart(
          this.saledata.saleFulleYearAxis,
          this.saledata.saleFulleYear
        );
        this.list = this.saledata.saleRank;
      } else {
        this.renderChart(
          this.saledata.visitFullYeadAxis,
          this.saledata.visitFullYear
        );
        this.list = this.saledata.visitRank;
      }
    },
    renderChart(data1, data2) {
      this.option = {
        title: {
          text: "年度销售额",
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
          type: "category",
          data: data1,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
          splitline: {
            linestyle: {
              type: "dotted",
            },
          },
        },
        grid: {
          left: 40,
        },
        series: [
          {
            data: data2,
            type: "bar",
            color: "rgb(135, 206, 235)",
            barWidth: "40%",
          },
        ],
      };
    },
  },
  async mounted() {
    const res = await getSaleData();
    this.saledata = res.data;
    this.renderChart(
      this.saledata.saleFulleYearAxis,
      this.saledata.saleFulleYear
    );
    this.list = this.saledata.saleRank;
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
  padding: 0;
}
.second-row {
  user-select: none;
  position: relative;
  width: 100%;
  margin-top: 20px;
  .el-card__header .el-menu {
    padding-left: 50px;
  }
  .right {
    position: absolute;
    top: 10px;
    right: 2%;
    div {
      display: inline-block;
    }
    .el-radio-group {
      display: inline-block;
      line-height: 1;
      vertical-align: middle;
      font-size: 0;
      margin-right: 20px;
    }
    .el-range-editor.el-input__inner {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
    }
  }
  .card-content {
    display: flex;
    .left-chart {
      flex: 0 0 70%;
      height: 434px;
    }
  }
  .right-list {
    flex: 1;
    .list-title {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 600;
    }
    .list-item {
      margin: 20px 0;
      display: flex;
      gap: 20px;
      span {
        font-size: 14px !important;
        color: #464545;
        &:first-child {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          text-align: center;
          line-height: 20px;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &.top-3 {
          background-color: #09b3f7;
          color: #fff;
        }
      }
    }
  }
}
</style>
